<!-- 超标时段分析 --> 
<template>
  <div class="newTest">
    <div class="searchBox">
      <div class="left">
        <div
          :class="['item', type === 0 ? 'active' : '']"
          style="margin-right: 40px"
          @click="changeSelect(0)"
        >
          <div class="title">超标时段分析</div>
          <div class="line" v-show="type === 0"></div>
        </div>
        <div
          :class="['item', type === 1 ? 'active' : '']"
          @click="changeSelect(1)"
        >
          <div class="title">超标站点分析</div>
          <div class="line" v-show="type === 1"></div>
        </div>
      </div>
      <div class="right">
        <div class="type" v-if="type === 0">
          <el-radio-group v-model="searchForm.radio" @change="changeRadio">
            <el-radio :label="0">一小时数据</el-radio>
            <el-radio :label="1">两小时数据</el-radio>
          </el-radio-group>
        </div>
        <div class="black-box">
          <div class="time-select1 familyD">
            <span
              @click="select('date')"
              :class="[searchForm.dayType === 'date' ? 'active' : '', 'span']"
              >日</span
            >
            <span
              @click="select('week')"
              :class="[searchForm.dayType === 'week' ? 'active' : '', 'span']"
              >周</span
            >
            <span
              @click="select('month')"
              :class="[searchForm.dayType === 'month' ? 'active' : '', 'span']"
              >月</span
            >
            <div class="select-input ml-6">
              <el-date-picker
                :disabled="searchForm.disabled"
                @change="changeTime"
                popper-class="popper-class"
                :picker-options="pickerOptions"
                :format="searchForm.formatLabel"
                :value-format="searchForm.valueformat"
                v-model="searchForm.value"
                :type="searchForm.dayType"
                ref="picker"
                size="mini"
                :clearable="false"
              ></el-date-picker>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dataChartCnt" v-loading="hisLoading">
      <div class="dataChartBox" v-if="!type">
        <div
          class="chart3"
          v-for="(item, index) in overListOneHour"
          :key="index"
        >
          <lineChart :option="item" :clickEvent="getOpenOverAction"></lineChart>
        </div>
        <p class="noData" v-if="overListOneHour.length === 0">暂无数据</p>
      </div>
      <div class="towChart" v-else>
        <div class="chart1">
          <lineChart
            v-if="optionOverTwoHour"
            :option="optionOverTwoHour"
            :clickEvent="getOpenAction"
          ></lineChart>
          <p class="noData" v-else>暂无两小时数据</p>
        </div>
        <div class="chart2">
          <lineChart
            v-if="optionOverOneHour"
            :option="optionOverOneHour"
            :clickEvent="getOpenAction"
          ></lineChart>
          <p class="noData" v-else>暂无一小时数据</p>
        </div>
      </div>
    </div>
    <el-dialog
      custom-class="over"
      :visible.sync="overVisible"
      width="60%"
      :append-to-body="true"
    >
      <div slot="title" class="dialog-header">
        <div class="left">
          <div class="title">超标详情</div>
          <div class="content">
            {{ detailInfo.time }} {{ detailInfo.title }} 合计超标：{{
              detailInfo.value
            }}次 超标因子为：<span
              v-for="(item, index) in detailInfo.factor"
              :key="index"
              style="margin-right: 10px"
            >
              <span style="color: #ff6665"> {{ index }}{{ item }}</span>
              次</span
            >
          </div>
        </div>
      </div>
      <div class="table" v-loading="hisLoadingDialg">
        <el-table
          :data="detailInfo.list"
          height="100%"
          :cell-style="{ height: '40px' }"
        >
          <el-table-column
            align="center"
            label="序列"
            type="index"
            :width="100"
          ></el-table-column>
          <el-table-column prop="gmtMonitor" label="超标时间" align="center">
          </el-table-column>
          <el-table-column align="center" label="超标因子及浓度">
            <template slot-scope="{ row }">
              <span class="texthead fs-14" v-if="row.nickel"
                >总镍：
                <span style="color: #ff6665">{{ row.nickel }}</span> mg/L</span
              >
              <span class="texthead fs-14" v-if="row.nitrogen"
                >总氮：
                <span style="color: #ff6665">{{ row.nitrogen }}</span>
                mg/L</span
              >
              <span class="texthead fs-14" v-if="row.ph"
                >pH:
                <span style="color: #ff6665">{{ row.ph }}</span>
              </span>
              <span class="texthead fs-14" v-if="row.cod"
                >CODcr:
                <span style="color: #ff6665">{{ row.cod }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.ammoniaNitrogen"
                >氨氮:
                <span style="color: #ff6665">{{ row.ammoniaNitrogen }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.cuprum"
                >总铜:
                <span style="color: #ff6665">{{ row.cuprum }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.chromium"
                >总铬:
                <span style="color: #ff6665">{{ row.chromium }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.prussiate"
                >总氰化物:
                <span style="color: #ff6665">{{ row.prussiate }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.zinc"
                >总锌:
                <span style="color: #ff6665">{{ row.zinc }}</span>
                mg/L
              </span>
              <span class="texthead fs-14" v-if="row.phosphorus"
                >总磷:
                <span style="color: #ff6665">{{ row.phosphorus }}</span>
                mg/L
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="超标倍数">
            <template slot-scope="{ row }">
              <span class="texthead fs-14" v-if="row.phMultiple"
                >pH：<span style="color: #ff6665">-</span>
              </span>
              <span class="texthead fs-14" v-if="row.nickelMultiple"
                >总镍：<span style="color: #ff6665">{{
                  row.nickelMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.chromiumMultiple"
                >总铬：<span style="color: #ff6665">{{
                  row.chromiumMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.nitrogenMultiple"
                >总氮：<span style="color: #ff6665">{{
                  row.nitrogenMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.codMultiple"
                >CODcr：<span style="color: #ff6665">{{
                  row.codMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.ammoniaNitrogenMultiple"
                >氨氮：<span style="color: #ff6665">{{
                  row.ammoniaNitrogenMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.cuprumMultiple"
                >总铜：<span style="color: #ff6665">{{
                  row.cuprumMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.prussiateMultiple"
                >总氰化物：<span style="color: #ff6665">{{
                  row.prussiateMultiple
                }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.zincMultiple"
                >总锌:<span style="color: #ff6665">{{ row.zincMultiple }}</span>
                倍</span
              >
              <span class="texthead fs-14" v-if="row.phosphorusMultiple"
                >总磷:<span style="color: #ff6665">{{
                  row.phosphorusMultiple
                }}</span>
                倍</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging mt-10">
        <v-paging
          :pageNum="searchForm.pageNum"
          @setCurrent="setPage"
          @setCurren="setNum"
          :total="totalpage"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import lineChart from "../components/charts.vue";
import { period, site, sitedata, exceeded } from "@/http/api";
import { getFirstDayOfMonth, CurrentMonthLast } from "@/plugins/dateUtil";
export default {
  components: {
    lineChart,
  },
  data() {
    return {
      totalpage: 0,
      detailInfo: {
        time: "2021-04-08",
        title: "",
        value: "",
        list: [],
        name: "",
        factor: {},
      },
      overVisible: false,
      overTimeVisible: false,
      overData: {},
      siteData: {},
      overListOneHour: [],
      optionOverOneHour: {},
      optionOverTwoHour: {},
      hisLoading: true,
      hisLoadingDialg: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime() - 24 * 3600 * 1000;
        },
      },
      searchForm: {
        disabled: false,
        lasttime: "",
        starttime: "",
        pageNum: 1,
        pageSize: 12,
        radio: 1,
        type: "oneHour",
        dayType: "date",
        formatLabel: "yyyy-MM-dd",
        valueformat: "yyyy-MM-dd",
        value: new Date(new Date().getTime() - 24 * 3600 * 1000),
      },
      type: 0,
      colors: {
        石岩浪心泵站: {
          color: "#F79797",
        },
        松岗污水处理厂二期: {
          color: "#F7AD88",
        },
        创业三路监测车: {
          color: "#F0CB81",
        },
        创业二路监测车: {
          color: "#E5E66A",
        },
        茅洲河北箱涵光明来水: {
          color: "#C1E874",
        },
        沙井一期进水口: {
          color: "#A2E880",
        },
        松岗总口: {
          color: "#87ED87",
        },
        "江碧1#": {
          color: "#80E8A2",
        },
        万安排口: {
          color: "#80E8C5",
        },
        固戍水质净化厂: {
          color: "#80E8E8",
        },
        松福桥西: {
          color: "#8BCEF0",
        },
        福永水质净化厂: {
          color: "#D9A2F5",
        },
        洪桥头来水: {
          color: "#ADADFF",
        },
        塘下涌来水: {
          color: "#C1A6F5",
        },
        沙井二期进水口: {
          color: "#F5A2D9",
        },
        "沙江4#": {
          color: "#F5A2F5",
        },
        "沙江5#": {
          color: "#95B5F5",
        },
        懋昌东: {
          color: "#F5A2BD",
        },
      },
    };
  },
  created() {
    this.changeSelect(this.type);
  },
  methods: {
    /* 超标时段和超标站点选择 */
    changeSelect(type) {
      this.type = type;
      this.overListOneHour = [];
      this.optionOverOneHour = {};
      this.optionOverTwoHour = {};
      this.hisLoading = true;
      this.select(this.searchForm.dayType);
    },
    /* 日月周，选择 */
    select(type) {
      this.searchForm.dayType = type;
      let month = new Date().getTime() - 30 * 24 * 3600 * 1000;
      let date = new Date().getTime() - 24 * 3600 * 1000;
      let week = new Date().getTime() - 24 * 3600 * 1 * 1000;
      let e = null;
      switch (type) {
        case "month":
          this.searchForm.value = new Date(month);
          this.searchForm.valueformat = "yyyy-MM";
          this.searchForm.formatLabel = "yyyy-MM";
          this.pickerOptions = {
            disabledDate(time) {
              return time.getTime() > month;
            },
          };
          this.searchForm.disabled = false;
          e = this.$getOcerTime(new Date(month), "month");
          break;
        case "date":
          this.searchForm.value = new Date(date);
          this.searchForm.formatLabel = "yyyy-MM-dd";
          this.searchForm.valueformat = "yyyy-MM-dd";
          this.pickerOptions = {
            disabledDate(time) {
              return time.getTime() > date;
            },
          };
          this.searchForm.disabled = false;
          e = this.$getOcerTime(new Date(date), "date");
          break;
        default:
          this.pickerOptions = {
            disabledDate(time) {
              return time.getTime() > date || time.getTime() < week;
            },
          };
          this.searchForm.value = new Date(date);
          this.searchForm.valueformat = "yyyy-MM-dd";
          this.searchForm.formatLabel =
            this.$getOcerTime(
              new Date(new Date(new Date().getTime() - 24 * 3600 * 7 * 1000)),
              "date"
            ) +
            "至" +
            this.$getOcerTime(new Date(date), "date");
          this.detailInfo.time = this.searchForm.formatLabel;
          this.searchForm.disabled = true;
          break;
      }
      this.changeTime(e);
    },
    /* 时间选择 */
    changeTime(e) {
      switch (this.searchForm.dayType) {
        case "month":
          this.detailInfo.time = e;
          this.searchForm.starttime = getFirstDayOfMonth(new Date(e));
          this.searchForm.lasttime = CurrentMonthLast(new Date(e));
          break;
        case "date":
          this.searchForm.starttime = e + " 00:00:00";
          this.searchForm.lasttime = e + " 23:59:59";
          this.detailInfo.time = e;
          break;
        default:
          this.searchForm.lasttime =
            this.$getOcerTime(
              new Date(new Date().getTime() - 24 * 3600 * 1000),
              "date"
            ) + " 23:59:59";
          this.searchForm.starttime =
            this.$getOcerTime(
              new Date(new Date().getTime() - 24 * 3600 * 7 * 1000),
              "date"
            ) + " 00:00:00";
          break;
      }
      this.overListOneHour = [];
      this.optionOverOneHour = {};
      this.optionOverTwoHour = {};
      this.hisLoading = true;
      if (this.type === 0) {
        this.init();
      } else {
        this.initSite();
      }
    },
    /* 初始化超标时段 */
    async init() {
      var params = {
        lasttime: this.searchForm.lasttime,
        starttime: this.searchForm.starttime,
      };
      let res = await period(params);
      this.hisLoading = false;
      this.overData = res.data;
      if (this.searchForm.radio === 0) {
        this.initOption(res.data.onehour, 24);
      } else {
        this.initOption(res.data.twohour, 12);
      }
    },
    /* 初始化超标站点数据 */
    async initSite() {
      var params = {
        lasttime: this.searchForm.lasttime,
        starttime: this.searchForm.starttime,
      };
      let res = await site(params);
      this.hisLoading = false;
      this.siteData = res.data;
      var sum = this.setMax(res.data.twohour, res.data.onehour);
      this.optionOverOneHour = this.initOneHour(res.data.onehour, sum);
      this.optionOverTwoHour = this.initTwoHour(res.data.twohour, sum);
    },
    /* 单个站点超标数据获取 */
    async getsitedata(name) {
      var params = {
        lasttime: this.searchForm.lasttime,
        starttime: this.searchForm.starttime,
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        waterStation: name,
      };
      let res = await sitedata(params);
      this.hisLoadingDialg = false;
      this.detailInfo.factor = res.data.factor;
      this.detailInfo.list = res.data.data;
      this.totalpage = res.data.total;
    },

    /* 打开超标时段分析弹窗 */
    getOpenOverAction(e) {
      e.name = e.name.split(":")[0];
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 12;
      this.detailInfo.title = e.data.title;
      this.detailInfo.value = e.data.value;
      this.detailInfo.name = e.name;
      this.overVisible = true;
      this.hisLoadingDialg = true;
      this.getexceeded(e.name, e.data.title);
    },
    /* 根据时间区间和站点名称获取某个时间点的超标数据 */
    async getexceeded(value, title) {
      var params = {
        lasttime: this.searchForm.lasttime,
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        starttime: this.searchForm.starttime,
        timePeriod: value,
        waterStation: title,
      };

      let res = await exceeded(params);
      this.hisLoadingDialg = false;
      this.detailInfo.list = res.data.data;
      this.detailInfo.factor = res.data.factor;
      this.totalpage = res.data.total;
    },
    /* 打开超标站点分析弹窗 */
    getOpenAction(e) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 12;
      this.detailInfo.title = e.name;
      this.detailInfo.value = e.value;
      this.hisLoadingDialg = true;
      this.getsitedata(e.name);
      this.overVisible = true;
    },
    /* 超标时段图表 */
    initOption(data, num) {
      for (let item in data) {
        this.overListOneHour.push({
          grid: {
            height: "60%",
          },
          title: {
            text: item,
            textStyle: {
              color: "#2399FF",
              fontSize: 16,
            },
            bottom: 20,
            left: "center",
          },
          xAxis: {
            splitNumber: num,
            axisTick: {
              show: false,
            },
            axisLabel: { interval: 0, rotate: 320 },
            axisLine: {
              lineStyle: {
                color: "#2399FF",
              },
            },

            type: "category",
            data: Object.keys(data[item]).map((item) => (item = item + ":00")),
          },
          textStyle: {
            color: "#838383",
          },
          yAxis: {
            max: this.searchForm.dayType === 'month'?30:15,
            minInterval: 1,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e5e5e5",
                type: "dashed",
              },
            },
            type: "value",
            name: "超标次数/次",
            nameTextStyle: {
              color: "#636363",
            },
          },
          series: [
            {
              barWidth: 20,
              itemStyle: {
                barBorderRadius: [0],
                color:
                  this.colors[item] && this.colors[item].color
                    ? this.colors[item].color
                    : "#2399FF",
              },
              data: this.setyAxis(data[item], item),
              type: "bar",
            },
          ],
        });
      }
    },

    /* 超标站点一小时图表 */
    initOneHour(data, sum) {
      if (Object.values(data).length > 0) {
        return {
          grid: {
            height: "50%",
            left: "26%",
            right: "16%",
          },
          title: {
            text: "一小时数据",
            textStyle: {
              color: "#2399FF",
              fontSize: 16,
            },
            top: 20,
            left: "center",
          },
          xAxis: {
            minInterval: 1,
            max: sum,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#85C6FF",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e5e5e5",
                type: "dashed",
              },
            },
            type: "value",
            name: "超标次数/次",
            nameTextStyle: {
              color: "#838383",
            },
          },
          textStyle: {
            color: "#838383",
          },
          yAxis: {
            nameTextStyle: {
              color: "#737373",
              verticalAlign: "bottom",
              align: "right",
            },
            name: "站点名称",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#85C6FF",
              },
            },
            type: "category",
            data: Object.keys(data),
            inverse: false,
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
              },
              barWidth: 14,
              barGap: "100%",
              itemStyle: {
                barBorderRadius: [0],
              },
              data: this.setSiteBarColor(data),
              type: "bar",
            },
          ],
        };
      }
    },
    /* 超标时段二小时图表 */
    initTwoHour(data, sum) {
      if (Object.values(data).length > 0) {
        return {
          grid: {
            height: "80%",
            left: "30%",
            right: "20%",
          },
          title: {
            text: "两小时数据",
            textStyle: {
              color: "#2399FF",
              fontSize: 16,
            },
            top: 20,
            left: "center",
          },

          xAxis: {
            max: sum,
            minInterval: 1,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#85C6FF",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            type: "value",
            name: "超标次数/次",
            nameTextStyle: {
              color: "#838383",
            },
          },
          textStyle: {
            color: "#838383",
          },
          yAxis: {
            nameTextStyle: {
              color: "#737373",
              verticalAlign: "bottom",
              align: "right",
            },
            name: "站点名称",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#85C6FF",
              },
            },
            type: "category",
            data: Object.keys(data),
            inverse: false,
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
              },
              barWidth: 14,
              barGap: "100%",
              itemStyle: {
                barBorderRadius: [0],
              },
              data: this.setSiteBarColor(data),
              type: "bar",
            },
          ],
        };
      }
    },
    /* 超标时段，一小时两小时选择 */
    changeRadio(e) {
      this.overListOneHour = [];
      if (e === 0) {
        this.initOption(this.overData.onehour, 24);
      } else {
        this.initOption(this.overData.twohour, 12);
      }
    },
    /* 设置超标站点分析图表颜色 */
    setSiteBarColor(data) {
      var arr = [];
      Object.entries(data).forEach((val) => {
        arr.push({
          label: {
            // show: item > 0 ? true : false,
            show: true,
            position: "right",
            color:
              this.colors[val[0]] && this.colors[val[0]].color
                ? this.colors[val[0]].color
                : "#2399FF",
          },
          itemStyle: {
            color:
              this.colors[val[0]] && this.colors[val[0]].color
                ? this.colors[val[0]].color
                : "#2399FF",
          },
          title: val[0],
          value: val[1],
        });
      });
      return arr;
    },
    /* 设置超标时段Y轴最大值 */
    setMax(value1, value2) {
      let one = Object.values(value1).sort((a, b) => {
        return b - a;
      });
      let two = Object.values(value2).sort((a, b) => {
        return b - a;
      });
      if (one[0] > two[0]) {
        return one[0];
      } else {
        return two[0];
      }
    },
    /* 设置超标时段分析柱状数据 */
    setyAxis(data, title) {
      var arr = [];
      Object.values(data).forEach((item) => {
        arr.push({
          label: {
            // show: item > 0 ? true : false,
            show: true,
            position: "top",
            color:
              this.colors[title] && this.colors[title].color
                ? this.colors[title].color
                : "#2399FF",
          },
          title: title,
          value: item,
        });
      });
      return arr;
    },
    /* 数量 */
    setNum(e) {
      this.searchForm.pageNum = e;
      this.hisLoadingDialg = true;
      if (this.type === 0) {
        this.getexceeded(this.detailInfo.name, this.detailInfo.title);
      } else {
        this.getsitedata(this.detailInfo.title);
      }
    },
    /* 页码 */
    setPage(e) {
      this.searchForm.pageSize = e;
      this.hisLoadingDialg = true;
      if (this.type === 0) {
        this.getexceeded(this.detailInfo.name, this.detailInfo.title);
      } else {
        this.getsitedata(this.detailInfo.title);
      }
    },
  },
};
</script>

<style lang="scss">
.newTest {
  min-height: 100%;
  .dataChartCnt {
    background-color: #fff;
    padding: 0 20px;
    .dataChartBox {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
    }
    .dataChartBox .chart3 {
      width: 48%;
      height: 380px;
      min-height: 380px;
      margin-right: 1%;
      background: #fff;
    }
    .noData {
      width: 100%;
      line-height: 60px;
      text-align: center;
      color: #909399;
    }
  }
  .towChart {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 765px;
    background: #f2f2f2;
    .chart1 {
      flex: 1;
      background: #fff;
      margin-right: 1%;
    }
    .chart2 {
      flex: 1;
      background: #fff;
    }
  }
  .searchBox {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        height: 30px;
        .title {
          display: block;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #bfbfbf;
          height: 30px;
        }
        .line {
          bottom: 0;
          position: absolute;
          width: 30px;
          height: 3px;
          background: #2399ff;
          border: 1px solid #c7d3e3;
          border-radius: 2px;
        }
      }
      .active {
        .title {
          color: #2399ff;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .black-box {
        display: flex;
        align-items: center;
        margin-left: 48px;
        .time-select1 {
          display: flex;
          align-items: center;
          padding: 0px 8px;
          cursor: pointer;
          .span {
            display: inline-block;
            padding: 0px 10px;
            height: 28px;
            background: #fff;
            border: 1px solid #dcdfe6;
            opacity: 0.6;
            border-radius: 2px;
            text-align: center;
            line-height: 28px;
            margin-right: 16px;
          }
          .active {
            opacity: 1;
            color: #57b1ff;
            border: 1px solid #57b1ff;
          }

          .select-input {
            /deep/ .el-input__prefix {
              right: 0.02604rem;
              left: auto;
              top: -4px;
            }
            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
              width: 230px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.time-select1 .el-picker-panel__content {
  max-height: initial !important;
  width: auto;
}
.popper-class {
  position: absolute !important;
  z-index: 10000 !important;
}
</style>
<style lang="scss">
.dialog-header {
  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .content {
    font-size: 16px;
  }
}
.table {
  height: 500px;
  border: 1px solid #dde4eb;
  .table {
    flex: 1;
    width: 100%;
    position: relative;
    .top {
      position: absolute;
      width: 100%;
    }
  }
  .texthead {
    margin-right: 19px;
  }
}
.paging {
  .bottom-wrap {
    width: 100%;
    position: relative;
    top: 0;
  }
  .block {
    margin: 0px;
    padding-bottom: 0px;
    margin-top: 20px;
  }
}
.el-dialog__headerbtn .el-dialog__close {
  font-size: 30px;
  position: relative;
  top: 8px;
}
</style>